<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的商店</title>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<style>
    header h1{
        text-align: center;
    }
    ul{
        list-style: none;
    }
   
    a {
        text-decoration: none;
        color: #333;
    }
    #nav{
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        height: 60px;
        background-color: black;
    }
    #nav ul {
            display: flex;
            justify-content: center; 
            gap: 20px; /* 设置列表项之间的间距 */
        }
    #nav a{
        color: white;
    }
    #bijiben{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap:35px;
        width: 1300px;
    }
    #bijiben span{
        font-size: 20px;
        color: red;
    }
    
    #bijibening{
        height: 200px;
        width: 200px;
    

    }
    #middle{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 1300px;
    }
    #middle1{
        display: flex;
        justify-content: center;
    }
    #footer{
        display: flex;
        flex-direction: column;
    }
</style>
<body>
    <header>
        <h1>我的商店</h1>
        <div id="nav">
            <ul >
                <li><a href="#notebooks">笔记本</a></li>
                <li><a href="https://www.asus.com.cn/">首页</a></li>
                <li><a href="https://w3.asus.com.cn/">商品列表</a></li>
                <li><a th:href="@{/cart}">购物车</a></li>
                <li><a href="#">我的账户</a></li>
                <li><a href="#keyboards">键盘</a></li>
            </ul>
            <div style="margin-left: auto; margin-right: 20px; display: flex; align-items: center; gap: 20px;">
                <th:block th:if="${session.user != null}">
                    <span style="color: white;">
                        <i class="fa fa-user-circle"></i>
                        <span th:text="${session.user.username}">用户名</span>
                    </span>
                    <a th:href="@{/logout}" style="color: white; text-decoration: none;">
                        <i class="fa fa-sign-out"></i> 退出登录
                    </a>
                </th:block>
                <th:block th:unless="${session.user != null}">
                    <span style="color: white;">
                        <i class="fa fa-exclamation-circle"></i>
                        请先登录
                    </span>
                    <a th:href="@{/login}" style="color: white; text-decoration: none;">
                        <i class="fa fa-sign-in"></i> 去登录
                    </a>
                </th:block>
            </div>
        </div>
    </header>

    <!--导航栏一-->
 
    <!--商品类别-->
    
    <!--推荐商品-->
    <div id="middle1">
        <div id="middle">
            <!-- 笔记本 -->
            <h2>推荐笔记本</h2>
             <div id="notebooks" >
                <div id="bijiben" >
                    <div>
                        <p>天选笔记本</p>
                        <a th:href="@{/products/{id}(id=${1})}">
                            <img  src="天选笔记本.jpg" alt="笔记本" id="bijibening" >
                        </a>
                        <p>天选5 Pro R9 4060</p>
                        <span>￥8279</span>
                    </div>
                    <div>
                        <p>天选笔记本</p>
                        <a th:href="@{/products/{id}(id=${1})}">
                            <img src="天选笔记本.jpg" alt="笔记本" id="bijibening" >
                        </a>
                        <p>天选5 Pro R9 4060</p>
                        <span>￥8279</span>
                    </div>
                    
                    <div>
                        <p>天选笔记本</p>
                        <a th:href="@{/products/{id}(id=${1})}">
                            <img src="天选笔记本.jpg" alt="笔记本" id="bijibening">
                        </a>
                     
                        <p>天选5 Pro R9 4060</p>
                        <span>￥8279</span>
                    </div>
                    
                    <div>
                        <p>天选笔记本</p>
                        <a th:href="@{/products/{id}(id=${1})}">
                            <img src="天选笔记本.jpg" alt="笔记本" id="bijibening" >
                        </a>
                
                        <p>天选5 Pro R9 4060</p>
                        <span>￥8279</span>
                    </div>
                    
                    <div>
                        <p>天选笔记本</p>
                        <a th:href="@{/products/{id}(id=${1})}">
                            <img src="天选笔记本.jpg" alt="笔记本" height="200" width="200" usemap="#iname" >
                        </a>
                        <p>天选5 Pro R9 4060</p>
                        <span>￥8279</span>
                    </div>
                    <div>
                        <p>天选笔记本</p>
                        <a th:href="@{/products/{id}(id=${1})}">
                            <img src="天选笔记本.jpg" alt="笔记本" height="200" width="200" usemap="#iname" >
                        </a>
                        <p>天选5 Pro R9 4060</p>
                        <span>￥8279</span>
                    </div>
                    <div>
                        <p>天选笔记本</p>
                        <a th:href="@{/products/{id}(id=${1})}">
                            <img src="天选笔记本.jpg" alt="笔记本" height="200" width="200" usemap="#iname" >
                        </a>
                        <p>天选5 Pro R9 4060</p>
                        <span>￥8279</span>
                    </div>
                    <div>
                        <p>天选笔记本</p>
                        <a th:href="@{/products/{id}(id=${1})}">
                            <img src="天选笔记本.jpg" alt="笔记本" height="200" width="200" usemap="#iname" >
                        </a>
                        <p>天选5 Pro R9 4060</p>
                        <span>￥8279</span>
                    </div>
                    <div>
                        <p>天选笔记本</p>
                        <a th:href="@{/products/{id}(id=${1})}">
                            <img src="天选笔记本.jpg" alt="笔记本" height="200" width="200" usemap="#iname" >
                        </a>
                        <p>天选5 Pro R9 4060</p>
                        <span>￥8279</span>
                    </div>
                    <div>
                        <p>天选笔记本</p>
                        <a th:href="@{/products/{id}(id=${1})}">
                            <img src="天选笔记本.jpg" alt="笔记本" height="200" width="200" usemap="#iname" >
                        </a>
                        <p>天选5 Pro R9 4060</p>
                        <span>￥8279</span>
                    </div>
                </div>
             </div>
             <h2>推荐键盘</h2>
           <!-- 键盘 -->
             <div id="keyboards">
                <div id="bijiben">
                    <div>
                        <p>天选游戏键盘</p>
                        <a th:href="@{/products/{id}(id=${2})}">
                            <img src="键盘.jpg" alt="键盘" id="bijibening" >
                        </a>
                        <p>天选游戏键盘</p>
                        <span>￥499</span>
                    </div>
                    <div>
                        <p>天选游戏键盘</p>
                        <a th:href="@{/products/{id}(id=${2})}">
                            <img src="键盘.jpg" alt="键盘" id="bijibening" >
                        </a>
                        <p>天选游戏键盘</p>
                        <span>￥499</span>
                    </div>
                    <div>
                        <p>天选游戏键盘</p>
                        <a th:href="@{/products/{id}(id=${2})}">
                            <img src="键盘.jpg" alt="键盘" id="bijibening" >
                        </a>
                        <p>天选游戏键盘</p>
                        <span>￥499</span>
                    </div>
                    <div>
                        <p>天选游戏键盘</p>
                        <a th:href="@{/products/{id}(id=${2})}">
                            <img src="键盘.jpg" alt="键盘" id="bijibening" >
                        </a>
                        <p>天选游戏键盘</p>
                        <span>￥499</span>
                    </div>
                    <div>
                        <p>天选游戏键盘</p>
                        <a th:href="@{/products/{id}(id=${2})}">
                            <img src="键盘.jpg" alt="键盘" id="bijibening" >
                        </a>
                        <p>天选游戏键盘</p>
                        <span>￥499</span>
                    </div>
                    <div>
                        <p>天选游戏键盘</p>
                        <a th:href="@{/products/{id}(id=${2})}">
                            <img src="键盘.jpg" alt="键盘" id="bijibening" >
                        </a>
                        <p>天选游戏键盘</p>
                        <span>￥499</span>
                    </div>
                    <div>
                        <p>天选游戏键盘</p>
                        <a th:href="@{/products/{id}(id=${2})}">
                            <img src="键盘.jpg" alt="键盘" id="bijibening" >
                        </a>
                        <p>天选游戏键盘</p>
                        <span>￥499</span>
                    </div>
                    <div>
                        <p>天选游戏键盘</p>
                        <a th:href="@{/products/{id}(id=${2})}">
                            <img src="键盘.jpg" alt="键盘" id="bijibening" >
                        </a>
                        <p>天选游戏键盘</p>
                        <span>￥499</span>
                    </div>
                    <div>
                        <p>天选游戏键盘</p>
                        <a th:href="@{/products/{id}(id=${2})}">
                            <img src="键盘.jpg" alt="键盘" id="bijibening" >
                        </a>
                        <p>天选游戏键盘</p>
                        <span>￥499</span>
                    </div>
                    <div>
                        <p>天选游戏键盘</p>
                        <a th:href="@{/products/{id}(id=${2})}">
                            <img src="键盘.jpg" alt="键盘" id="bijibening" >
                        </a>
                        <p>天选游戏键盘</p>
                        <span>￥499</span>
                    </div>
                </div>
             </div>
          
       </div>
    </div>
    <!--页脚-->
    <footer style=" font-size: 15px;">
        <div id="footer">
            <p style="text-align: center;">&nbsp;</p>
            <p style="text-align: center;">有任何购物问题请联系商城客服 | 电话：400-091-9520</p>
            <p style="text-align: center;"><a target="_blank" href="https://static.asus.com.cn/static/store/asus.pdf" data-cl-id="233249950">营业执照：12000002202112290026</a>&nbsp;│<a href="http://beian.miit.gov.cn/" target="_blank" data-cl-id="224550888">沪ICP备11025349号-3</a>&nbsp;│ ASUSTeK Computer Inc. All Rights Reserved.</p>
            <div id="footer" style="margin:0 auto; padding:20px 0;text-align: center;"><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011202002313" data-cl-id="1060031293">
                    <img src="" style="text-align: center; float: left;"></a>
                <p style="text-align: center; display: inline-block; text-decoration: none; height: 20px; line-height: 20px;margin: 0px 0px 0px 5px; color: rgb(147, 147, 147);">
                    <a href="/store/user/register/license.html" style="margin-right: 15px;" data-cl-id="425515857">ASUS使用条款</a>
                    <a href="/store/user/register/privacy.html" style="margin-right: 15px;" data-cl-id="2370962363">隐私政策</a>
                    <a href="https://www.asus.com.cn/store/user/register/privacy-con.html" style="margin-right: 15px;" data-cl-id="1851093180">隐私说明</a>
                    <img src="//static.asus.com.cn/static/store/images/735f16509d9a54d5ddade073f133e7dcf2c0a486.png?1499224546#h"><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011202002313" rel="nofollow" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;" data-cl-id="2482528004">沪公网安备
                        31011202002313号</a>
                </p>
            </div>
        </div>
    </footer>
</body>
</html>
